<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">图像风格迁移</h2>
    <br><br>

    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="style" (change)="transfer()" style="height: 36px" [disabled]="sending">
                <mat-button-toggle value="mosaic" align="center">
                    马赛克风格
                </mat-button-toggle>
                <mat-button-toggle value="candy" align="center">
                    糖果风格
                </mat-button-toggle>
                <mat-button-toggle value="rain_princess" align="center">
                    rain princess现代印象派风格
                </mat-button-toggle>
                <mat-button-toggle value="udnie" align="center">
                    udnie立体主义风格
                </mat-button-toggle>
            </mat-button-toggle-group>
            <br><br>
            <div>
                <input type="file" ng2FileSelect [uploader]="fileSelector" accept=".jpg, .jpeg, .png, image/*" [disabled]="sending" />
            </div>
            <br>
            <div>
                <img style="max-width: 100%" src="{{selectedImgDataUrl}}" alt="">
            </div>
        </mat-card>
    </div>
    <div class="row justify-content-center">
        <mat-card style="width: 90%; margin-top: 20px">
            <div *ngIf="img_url && !sending">
                <img style="max-width: 100%" src="{{img_url}}" alt="">
            </div>
            <p *ngIf="!img_url && !sending">风格迁移结果</p>
            <p *ngIf="sending">正在努力计算...</p>
            <mat-spinner *ngIf="sending"></mat-spinner>
            <p *ngIf="error">出错啦...</p>
        </mat-card>
    </div>
</mat-card>
